<!DOCTYPE html>
<html>
<head>
    <title>Camera Stream</title>
</head>
<body>
<video id="localVideo" autoplay></video>
<script>
    // 获取视频流并显示在<video>元素中
    async function startCamera() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({video: true});
            const videoElement = document.getElementById('localVideo');
            videoElement.srcObject = stream;
        } catch (error) {
            console.error('Error accessing the camera:', error);
        }
    }

    startCamera();

    // 建立WebSocket连接
    const socket = new WebSocket('ws://127.0.0.1/ws/video/wms/');

    // 当摄像头捕获到新的视频帧时，将其发送到WebSocket服务器
    const videoElement = document.getElementById('localVideo');
    videoElement.addEventListener('play', () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;

        function sendVideoFrame() {
            context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
            const imageData = canvas.toDataURL('image/jpeg');
            socket.send(imageData);
            requestAnimationFrame(sendVideoFrame);
        }

        sendVideoFrame();
    });
</script>
</body>
</html>
